<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalabel=no" />
	<title>产品创新设计工作室</title>

	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<link rel="stylesheet" href="css/index.css" />
	
	<script type="text/javascript" src="js/jquery-3.2.0.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	


 
</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<div class=" navbar-header ">
				<a href="#" class="navbar-brand" id="logo"><img src="img/logo.png" alt="产品创新设计工作室"/></a>
				<span style="text-align: center;line-height: 50px; margin-left: 10px;font: #DEDEDE;">产品创新设计工作室</span>
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse" id="navbar-collapse">
			<ul class="nav navbar-nav  navbar-right">
				<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>首页</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-list"></span>资讯</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-fire"></span>案例</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span>关于</a></li>
			</ul>
			</div>
		</div>
	</nav>


<div id="myCarousel" class="carousel slide">
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
		<div class="item active" style="background: #3376f9;">
			<img src="img/bg1.jpg" alt="1" />
		</div>
		<div class="item" style="background: #1660f4;">
			<img src="img/bg2.png" alt="2" />
		</div>
		<div class="item" style="background: #fdcb2e;">
			<img src="img/bg3.jpg" alt="3" />
		</div>
	</div>
	<a href="#myCarousel" data-slide="prev" class="carousel-control hidden-xs left">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</a>
	<a href="#myCarousel" data-slide="next" class="carousel-control hidden-xs right">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</a>
</div>
		
		




	
<script>
	$(function(){
		//轮播自动播放
		$('#myCarousel').carousel({
			//自动4秒
			interval:4000,
		});
		//设置垂直居中
		$('.carousel-control').css('line-height',$('.carousel-inner').height()+'px');
		//改变窗口大小刷新
		$(window).resize(function(){
			var $height=('.carousel-inner img').eq(0).height()||
						('.carousel-inner img').eq(1).height()||
						('.carousel-inner img').eq(2).height();
			
			$('.carousel-control').css('line-height',$height()+'px');
		})
	})
</script>
</body>
</html>
